﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Login.aspx.cs" Inherits="TRL.TRLAdmin.Login" %>

<!DOCTYPE html>
<html lang="en">
    <head id="Head1" runat="server">
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>TRL Administration - Login Page</title>
    
        <!-- Bootstrap framework -->
        <link rel="stylesheet" href="~/bootstrap/css/bootstrap.min.css" />
        <link rel="stylesheet" href="~/bootstrap/css/bootstrap-responsive.min.css" />
            
        <!-- theme color-->
        <link rel="stylesheet" href="~/css/blue.css" />
            
        <!-- tooltip -->    
        <link rel="stylesheet" href="~/lib/qtip2/jquery.qtip.min.css" />
            
        <!-- main styles -->
        <link rel="stylesheet" href="~/css/style.css" />
    
        <!-- Favicons and the like (avoid using transparent .png) -->
        <link rel="shortcut icon" href="favicon.ico" />
        <link rel="apple-touch-icon-precomposed" href="icon.png" />
        <link href='http://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css' />
    
        <!--[if lt IE 9]>
            <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    </head>
    <body class="login_page">
        <div class="login_box">
            
            <form id="form1" runat="server">
                <div class="top_b">Sign in to TRL Admin</div>    
                <asp:Literal ID="FailureMessage" runat="server"></asp:Literal>
                <div class="cnt_b">
                    <div class="formRow">
                        <div class="input-prepend">
                            <span class="add-on"><i class="icon-user"></i></span>
                            <asp:TextBox ID="UserName" placeholder="Username" holder="Username" value="" runat="server" />
                        </div>
                    </div>
                    <div class="formRow">
                        <div class="input-prepend">
                            <span class="add-on"><i class="icon-lock"></i></span>
                            <asp:TextBox ID="Password" placeholder="Password" TextMode="Password" holder="Password" value="" runat="server" />
                        </div>
                    </div>
                    <div class="formRow clearfix">
                        <label class="checkbox"><asp:CheckBox ID="RememberMe" runat="server" /> Remember me</label>
                    </div>
                </div>
                <div class="btm_b clearfix">
                    <asp:Button id="LoginButton" CssClass="btn btn-inverse pull-right" Text="Sign In" runat="server" OnClick="LoginButtonClick" />
                </div>  
            </form>
            
            <div id="pass_form" style="display:none">
                <div class="top_b">Can't sign in?</div>    
                    <div class="alert alert-info alert-login">
                    Please enter your email address. You will receive a link to create a new password via email.
                </div>
                <div class="cnt_b">
                    <div class="formRow clearfix">
                        <div class="input-prepend">
                            <span class="add-on">@</span><input type="text" placeholder="Your email address" />
                        </div>
                    </div>
                </div>
                <div class="btm_b tac">
                    <button class="btn btn-inverse" type="submit">Request New Password</button>
                </div>  
            </div>
        </div>
        
        <div class="links_b links_btm clearfix">
            <span class="linkform"><a href="#pass_form">Forgot password?</a></span>
            <span class="linkform" style="display:none">Never mind, <a href="#login_form">send me back to the sign-in screen</a></span>
        </div>  
        
        <div class="row">
            <img style="display:block; margin-left: auto; margin-right: auto; margin-top: 30px;" src="<%= this.ResolveClientUrl("~/img/redlizard_200pxWide.jpg")%>" alt="Lizard Logo" />
        </div>

        <script src="<%= this.ResolveClientUrl("~/js/jquery.min.js")%>" type="text/javascript"></script>
        <script src="<%= this.ResolveClientUrl("~/js/jquery.actual.min.js")%>" type="text/javascript"></script>
        
        <!-- validation -->
        <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.0/jquery.validate.min.js"></script>
        
        <script src="<%= this.ResolveClientUrl("~/bootstrap/js/bootstrap.min.js")%>" type="text/javascript"></script>

        <script src="<%= this.ResolveClientUrl("~/js/jquery.placeholder-1.0.6.min.js")%>" type="text/javascript"></script>

        <script type="text/javascript">
            $(document).ready(function () {

                //* boxes animation
                form_wrapper = $('.login_box');
                $('.linkform a,.link_reg a').on('click', function (e) {
                    var target = $(this).attr('href'),
                        target_height = $(target).actual('height');
                    $(form_wrapper).css({
                        'height': form_wrapper.height()
                    });
                    $(form_wrapper.find('form:visible')).fadeOut(400, function () {
                        form_wrapper.stop().animate({
                            height: target_height
                        }, 500, function () {
                            $(target).fadeIn(400);
                            $('.links_btm .linkform').toggle();
                            $(form_wrapper).css({
                                'height': ''
                            });
                        });
                    });
                    e.preventDefault();
                });

                //* validation
                $('#form1').validate({
                    onkeyup: false,
                    errorClass: 'error',
                    validClass: 'valid',
                    rules: {
                        UserName: { required: true, minlength: 3 },
                        Password: { required: true, minlength: 3 }
                    },
                    highlight: function (element) {
                        $(element).closest('div').addClass("f_error");
                    },
                    unhighlight: function (element) {
                        $(element).closest('div').removeClass("f_error");
                    },
                    errorPlacement: function (error, element) {
                        $(element).closest('div').append(error);
                    }
                });
            });
        </script>
    </body>
</html>



